<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/commond/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>档期网</title>
		<link rel="shortcut icon" href="${ctx }/image/logo_ico.ico" />
		<s:include value="/commond/keydesc.jsp"></s:include>
		<!-- CSS -->
		<link href="${ctx}/css/head/head.css" rel="stylesheet" type="text/css" />
		<link href="${ctx}/css/invite/invite_nav.css" type="text/css" rel="stylesheet" />
		<link href="${ctx}/css/main.css" rel="stylesheet" type="text/css" />
		<link href="${ctx}/css/content/connect_box.css" rel="stylesheet" type="text/css" />
		<link href="${ctx}/css/connect/add_ct.css" rel="stylesheet" type="text/css" />
		
		<!-- JavaScript -->
		<script type="text/javascript" src="${ctx}/js/common/jquery.js"></script>
		<script type="text/javascript">var jQ = jQuery.noConflict();</script>
		<script type="text/javascript" src="${ctx}/js/contact/contact_mode.js"></script>
		<script type="text/javascript" src="${ctx}/js/contact/contact_add.js"></script>
	</head>

	<body>
		<s:include value="/head.jsp"></s:include>
		<div class="invite_page" style="min-height: 600px;background: #C0D1DB;margin-top: 47px;height: auto;overflow: hidden;position: relative;">
			<table class="main" cellpadding="0" cellspacing="0" style="width: 900px;margin:30px auto;min-width: 900px;">
				<tr>
					<td class="center" style="width: 900px;padding: 0;">
						<div class="narrowtopline"></div>
			        	<ul class="narrowheadtitle">
			        		<li class="left"></li>
			        		<li class="title">
			        			<span>邀请好友</span>
			        			<div class="search_title">
									<select onchange="changeUserType(this);" id="search_type_sel" style="float: left; height: 22px; padding-top: 2px; padding-bottom: 2px;">
			                    		<option value="1">用户</option>
			                    		<option value="2">商家</option>
			                    	</select>
		                   			<input id="searchinput" onblur="checkStatus(this,event);" onfocus="checkStatus(this,event);" class="add_ul_input default" value="输入搜索的真实姓名" size="40">
		                       		<button id="searchbutton" class="add_ul_button" onclick="searchUser(this);"></button>
			        			</div>
			        		</li>
			        		<li class="right"></li>
			        	</ul>
			        	<div class="narrowbottomline"></div>
						<div class="connect_box">
			                <!-- 邀请好友 -->
			                <div class="add_ct" id="input_box">
			                	<div class="add_ul" style="display: none;">
			                    	<h2>站内搜索</h2>
			                        <span>输入昵称或邮箱，查找站内好友</span>
			                        <div>
			                        	<input size="40">
			                            <button>查找</button>
			                        </div>
			                    </div>
			                	<div class="add_ul">
			                    	<h2>邀请好友</h2>
			                        <div style="margin: 5px 0px;">
			                        	<span class="add_t">邮箱：</span>
			                            <input size="40" id="add_ul_email_ipt" type="text">
			                            <span style="color: #ff0000;">* </span>
			                            <span style="color: #ff0000;display: none;" id="add_ul_email_ipt_err"></span>
			                        </div>
			                        <div style="margin: 5px 0px;">
			                        	<span class="add_t">备注名：</span>
			                            <input size="40" maxlength="20" id="add_ul_name_ipt" type="text">
			                            <span style="color: #ff0000;">* </span>
			                            <span style="color: #ff0000;display: none;" id="add_ul_name_ipt_err"></span>
			                        </div>
			                        <div style="margin: 5px 0px;">
			                        	<span class="add_t">留言：</span>
			            				<textarea id="add_ul_memo_area">邀请您加入网站。</textarea>
			                        </div>
			                        <div style="margin: 5px 0px;">
			                        	<span style="width: 80px;height: 1px;display: block;"></span>
			                            <span style="color: #ff0000;">* </span>
			                            <span style="color: #ff0000;">为必须输入项</span>
			                        </div>
			                        <div style="margin: 5px 0px;">
			                        	<button style="margin-left:90px;" onclick="addContact()">发送邀请</button>
			                        </div>
			                    </div>
			                	<div class="add_ul">
			                		<div style="width: 310px;float: left;">
				                    	<h2>导入MSN联系人</h2>
				                        <div style="margin: 5px 0px;">
				                        	<span class="add_t">MSN账号：</span>
				                            <input size="40" style="width: 200px;" id="add_ul_msnname" type="text">
				                        </div>
				                        <div style="margin: 5px 0px;">
				                          	<span style="color: #999999;float: left;padding-left: 90px;">请输入完整账号，如：msn@hotmail.com</span>
				                        </div>
				                        <div style="margin: 5px 0px;">
				                        	<span class="add_t">MSN密码：</span>
				                            <input size="40" style="width: 200px;" id="add_ul_msnpwd" type="password">
				                        </div>
				                        <div style="height: 16px;display: block;margin: 5px 0px;">
				                        	<span style="color: #ff0000;float: left;padding-left: 90px;display: none;" id="add_ul_msn_err"></span>
				                        </div>
				                        <div style="margin: 5px 0px;">
				                        
				                        	<button style="margin-left:90px;" id="importBtn">导入</button>
				                        </div>
			                		</div>
			                		<div style="width: 200px;float: left;padding-top: 4px;">
										<div style="background-color: #FFFFE3;border: 1px solid #DCDCB3;border-radius: 3px 3px 3px 3px;color: #999999;float: right;margin-top: 38px;">
											<span style="background-color: #FFFFE3; color: #999999;float: right; word-wrap: break-word;padding-left:10px; line-height: 24px;">输入MSN账号和密码，查找MSN联系人。请放心，你的密码不会被记录。</span>
										</div>
									</div>
			                    </div>
			                    <!-- 
			                	<div class="add_ul">
			                    	<h2>导入邮箱联系人</h2>
			                        <div>
			                        	<span class="add_t">邮箱地址：</span>
			                            <input size="18">
			                            <span>@</span>
			                            <select>
			                                <option>请选择邮箱类型</option>
			                                <option>gmail.com</option>
			                                <option>sina.com</option>
			                            </select>
			                        </div>
			                        <div>
			                        	<span class="add_t">邮箱密码：</span>
			                            <input size="40">
			                        </div>
			                        <div>
			                        	<button style="margin-left:90px;">导入</button>
			                        </div>
			                    </div>
			                     -->
			                </div>
			                <!-- 邀请好友 -->
			                <div class="add_ct" id="show_box" style="display: none;">
			                	<div class="add_cl" id="add_cl_alreadycontact" style="display:none;">
			                    	<h2>有<b id="add_cl_alreadycontact_length"></b>人已经是您的联系人<a class="show" id="add_cl_alreadycontact_show"></a></h2>
			                        <div class="import_list" style="display:none" id="import_list_alreadycontact">
			                        </div>
			                    </div>
			                	<div class="add_cl" id="add_cl_alreadyreg" style="display:none;">
			                    	<h2>您的MSN联系人中已有<b id="add_cl_alreadyreg_length"></b>人注册网站，加他们为好友吧。<a class="hide" id="add_cl_alreadyreg_show"></a></h2>
			                    	<div class="add_cbox" id="import_list_alreadyreg_outer">
				                        <div class="import_list" id="import_list_alreadyreg">
				                        </div>
			                            <div class="il_btm">
			                                <div class="sel_all">
			                                    <input type="checkbox" onclick="alreadyreg_all_click(this);"/>
			                                    <span>全选</span>
			                                    <span style="color: #008800;padding-left: 200px;display: none;" class="result">已发送成功……</span>
			                                 	<button onclick="addAsFriends(this);">加为好友</button>
			                                </div>
			                            </div>
				                      </div>
			                    </div>
			                	<div class="add_cl" id="add_cl_none">
			                    	<h2>您的MSN联系有<b id="add_cl_none_length"></b>人还未注册，邀请他们一起加入吧。<a class="hide" id="add_cl_none_show"></a></h2>
			                    	<div class="add_cbox" id="import_list_none_outer">
				                        <div class="import_list" id="import_list_none">
				                        </div>
				                        <div class="il_btm">
				                            <div class="sel_all">
				                                <input type="checkbox" onclick="none_all_click(this);"/>
				                                <span>全选</span>
				                                <span style="color: #008800;padding-left: 200px;display: none;" class="result">已发送成功……</span>
				                             	<button onclick="sendInvites(this);">发送邀请</button>
				                            </div>
				                        </div>
			                        </div>
			                    </div>
			                </div>
						</div>
					</td>
				</tr>
			</table>
		</div>
		<s:include value="/foot.jsp"></s:include>
	</body>
</html>